<template>
	<div class="category-container">
		<el-tabs :tab-position="tabPosition" class="category-container-tabs">
			<el-tab-pane
				v-for="item in categoryArrs"
				:label="item.name"
				:key="item.name"
				:data-index="item.name"
				:class="{
					active: item.name === '1  新注册',
				}"
			></el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
	import { ref } from 'vue';

	const tabPosition = ref('left');
	defineProps({
		categoryArrs: {
			type: Array,
			default: () => [],
		},
	});
</script>

<style lang="scss" scoped>
	.category-container {
		width: 100%;
		height: 100%;
		.category-container-tabs {
			width: 100%;
			height: 50%;
			position: sticky;
			top: 0;
			&:deep(.el-tabs) {
			}
			&:deep(.el-tabs__content) {
				width: 0;
				flex: 0 0 0;
			}
			&:deep(.el-tabs__header) {
				width: 100%;
				margin: 0;
			}
			&:deep(.el-tabs__nav-wrap) {
				width: 100%;
			}
			&:deep(.el-tabs__item) {
				justify-content: flex-start;
				padding: 0;
				padding-left: 15px;
				position: relative;
				@include font(_, 14px, 24px, 500, var(--issue-text-category-color));
				&:hover {
					color: var(--issue-text-hover-color);
				}
			}
			&:deep(.el-tabs__nav) {
				width: 100%;
			}
			&:deep(.el-tabs__active-bar) {
				width: 5px;
				border-radius: 21px;
				padding-right: 0;
				background-color: #a5afbe;
			}
			&:deep(.is-active) {
				$maigin-right: 10px;
				background-color: var(--issue-bg-active-color);
				border-radius: 10px;
				margin-right: $maigin-right;
				width: calc(100% - $maigin-right);
				color: var(--issue-text-hover-color);
				&::after {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					width: 4px;
					height: 100%;
					border-top-left-radius: 4px;
					border-bottom-left-radius: 4px;
					background-color: var(--issue-text-hover-color);
				}
			}
		}
	}
</style>
